<template>
	<global-right-router>
		<div class="global-default-list-page">
			<div class="title">
				<global-svg-icon
					v-if="showBackIcon"
					icon-name="return"
					width="18px"
					height="18px"
					style="margin-right: 10px; vertical-align: middle; cursor: pointer"
					@click="router.go(-1)"
				></global-svg-icon>
				<p class="font-20-bold bread-crumb-title">{{ props.pageTitle }}</p>
			</div>
			<div class="page-action-region">
				<div class="basic-region">
					<div class="basic-region-left">
						<slot name="Slot-Basic-Action-Left" extra="页面基本操作组件左侧区域插槽"></slot>
					</div>

					<div class="basic-region-right">
						<slot name="Slot-Basic-Action-Right" extra="页面基本操作组件右侧区域插槽"></slot>
					</div>
				</div>

				<slot name="Slot-Page-Expand-Region" extra="页面高级搜索操作组件区域插槽"></slot>
			</div>

			<vue-scroll @handle-scroll="HandleScroll">
				<div class="page-list-region" :style="{ paddingBottom: `${paddingBottom}px` }">
					<slot name="Slot-Table" extra="列表区域插槽"></slot>
				</div>
			</vue-scroll>

			<div ref="refPaginationGroup" class="default-list-page-pagination-group">
				<slot name="Slot-Pagination" extra="分页器和列表勾选信息浮窗的区域插槽"></slot>
			</div>
		</div>
	</global-right-router>
</template>

<script setup lang="ts" name="global-default-list-page">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const props = defineProps({
	pageTitle: { type: String, default: '页面标题' },
	showBackIcon: { type: Boolean, default: false }
});

const router = useRouter();

const scrollTop = ref(0);
const HandleScroll = (vertical: Record<string, any>): void => {
	scrollTop.value = vertical.scrollTop;
};

const refPaginationGroup = ref(null);

const paddingBottom = ref(48);

onMounted(() => {
	let observer = new ResizeObserver((entries) => {
		paddingBottom.value = (entries[0].target as HTMLDivElement).offsetHeight + 24;
	});
	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
	observer.observe(refPaginationGroup.value!);
});
</script>

<style lang="less">
.global-default-list-page {
	// min-width: 1200px;
	// height: 100%;
	.ant-table {
		overflow-y: scroll;
		height: 550px;
	}

	.title {
		display: flex;
		font-size: 20px;
		font-weight: 700;
		font-style: normal;
		line-height: 28px; /* 140% */
		color: @text01;
		align-items: center;
	}

	.bread-crumb-title {
		color: rgba(240, 246, 252, 0.95);
	}

	.page-action-region {
		padding: 28px 0 24px;

		.basic-region {
			display: flex;
			justify-content: space-between;

			.basic-region-left {
				display: grid;
				grid-auto-flow: column;
				grid-column-gap: 32px;
				align-items: center;
			}

			.basic-region-right {
				display: grid;
				grid-auto-flow: column;
				grid-column-gap: 8px;
				direction: rtl; // 用来设置文本、表列水平溢出的方向。 rtl 表示从右到左， ltr 表示从左到右

				button {
					margin-left: 16px;
				}
			}
		}
	}
}

.page-list-region {
	overflow-y: scroll !important;
}
</style>

<style lang="less">
.default-list-page-pagination-group {
	// position: fixed;
	bottom: 0;
	z-index: 13;
	// width: calc(100vw - 184px);

	.global-pagination {
		position: static !important;
		width: 100% !important;
	}
}
</style>
